import './index.less';
import { Button , Form, type FormProps, Input } from 'antd';
import { useNavigate  } from 'react-router-dom'
type FieldType = {
    username?: string;
    password?: string;
};
  
export default function Login(){
    const onFinish: FormProps<FieldType>["onFinish"] = (values) => {
        console.log('Success:', values);
    };
      
    const onFinishFailed: FormProps<FieldType>["onFinishFailed"] = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };
    const navigate = useNavigate();
    const jump = () => {
        navigate('/home/info')
    }
    return (
        <div className='login-box'>
            <div className='login-wrap'>
                <h1>欢迎登录</h1>
                <Form
                    name="basic"
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                    labelCol={{ span: 4 }}
                    wrapperCol={{ span: 20 }}
                    autoComplete="off"
                >
                    <Form.Item<FieldType>
                    label="账户："
                    name="username"
                    rules={[{ required: true, message: '请输入用户名' }]}
                    >
                    <Input />
                    </Form.Item>

                    <Form.Item<FieldType>
                    label="密码："
                    name="password"
                    rules={[{ required: true, message: '请输入密码' }]}
                    >
                    <Input.Password />
                    </Form.Item>
                    <Form.Item<FieldType>
                         wrapperCol={{ offset: 4, span: 20 }}
                    >
                        <Button type="primary" block onClick={jump}>
                            登 录
                        </Button>
                    </Form.Item>
                </Form>
            </div>
        </div>
    )
}